<!--
 * @FilePath: index.html
 * @Author: 苏苏少年
 * @Date: 2022-12-19 17:39:49
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>案例库</title>
    <link rel="stylesheet" href="css/css.css" type="text/css">
</head>

<body>
    <canvas></canvas>
    <div id="frame">
        <div class="readme">
            READ ME
            <div class="hide">
                此案例库为纯JS编写，左下角按钮可以转换为四个不同的排版方式，
                每个有图像的案例小块均可点开为显示详细弹框，点击弹框外任意位置可隐藏弹框，
                之后点击图案可以进入当前案例页面，
                此界面具有滚轮效果，可调节观察距离，具有拖动效果，可视立体，
                背景为canvas编写的星空图，
                前三排为jquery效果，第四排位canvas绘制,以后为js案例。
                测试浏览器为：谷歌，火狐。(点击我隐藏)
            </div>
            <a href="project/js-多页导航图/html2.html"></a>
        </div>
        <div id="list">
            <ul></ul>
        </div>
        <div id="btn">
            <ul>
                <li class="click">Table</li>
                <li>Sphere</li>
                <li>Helix</li>
                <li>Grid</li>
            </ul>
        </div>
        <div id="alert">
            <div class="title"><span></span></div>
            <a href="" target="_blank">
                <img src="" alt="" class="pic">
            </a>
            <div class="annotation">写日期（选填）</div>
            <div class="content">详情请点击图片~~</div>
        </div>
    </div>
    <script src="js/data.js"></script>
    <script src="js/bg.js"></script>
    <script src="js/javascript.js"></script>
</body>

</html>